<template>
	<view class="section-title" :class="{'show-line':showLine}" :style="style">
		<view class="section-title__title" :class="{'show-line':showLine}">
			<slot name="title"></slot>
		</view>
		<view v-if="showRight" class="section-title__right">
			<slot><text show class="edit-button" @click.stop="tapEdit">编辑</text></slot>
		</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts" name="SectionTitle">
	import type { CSSProperties } from 'vue';
	import { defineProps, defineEmits, withDefaults, computed } from 'vue';
	const emit = defineEmits<{ editClick : [] }>();
	const props = withDefaults(defineProps<{
		top ?: string;
		bottom ?: string;
		showLine ?: boolean;
		showRight ?: boolean;
		customStyle ?: CSSProperties;
	}>(), {
		top: '32rpx',
		bottom: '0',
		showLine: false,
		showRight: true,
		customStyle: () => ({}),
	});

	const style = computed(() => {
		return {
			marginTop: props.top,
			marginBottom: props.bottom,
			...props.customStyle
		}
	});

	function tapEdit() {
		emit('editClick');
	}
</script>

<style scope lang="scss">
	.section-title {
		position: relative;
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		width: 100%;
		height: 48rpx;
		padding: 0 32rpx;
		box-sizing: border-box;

		&.show-line {
			&:before {
				content: '';
				display: inline-flex;
				flex-shrink: 0;
				width: 6rpx;
				height: 32rpx;
				background: #FF710A;
			}
		}



		&__title {
			display: inline-flex;
			align-items: center;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 36rpx;
			color: #000000;

			&.show-line {
				padding-left: 10rpx;
			}
		}

		&__right {
			display: inline-flex;
			flex: 1;
			height: 100%;
			justify-content: flex-end;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #929292;

			.edit-button {
				color: #ff710a;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
			}
		}
	}
</style>